/* eslint-disable semi */
/* eslint-disable semi */
/* eslint-disable quotes */
<template>
  <div>

    <van-image class="img-banner" src="http://lyc.kmmyxb.cn/lyc/static/img/bg.6e54e69.jpg" />
    <div>
      <div class="classify flexs">
        <div class="classify-three" v-for="(item, index) in middleimages" :key="index" @click="Onclick(item.id)">
          <van-image class="classify-img" :src="item.imgSrc" />
          <p class="classify-text">{{item.name}}</p>
        </div>

      </div>

    </div>
  </div>

</template>

<script>
import TabBar from "./TabBar.vue";
export default {
  components: {
    TabBar
  },
  data() {
    return {
      num: 2,
      active: 0,

      // middleimages: [{ id: 0, name: "司机加盟", imgSrc: require("../assers") }],
      middleimages: [
        { id: 0, name: "司机加盟", imgSrc: require("../assets/images/a1.png") },
        { id: 1, name: "我要出行", imgSrc: require("../assets/images/a2.png") },
        { id: 2, name: "个人中心", imgSrc: require("../assets/images/a3.png") }
      ]
    };
  },
  methods: {
    Onclick(id) {
      switch (id) {
        case 0:
          //点击跳转至上次浏览页面
          // this.$router.go(-1)

          console.log(0);

          break;
        case 1:
          console.log(1);

          break;
        case 2:
          //指定跳转地址
          this.$router.replace("/MyInfo");
          console.log(2);

          break;
        default:
          console.log("错误!");
          break;
      }
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #f6f6f6;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  display: block;
}
div {
  display: block;
  box-sizing: border-box;
}
.banner {
  width: 100%;
  height: 100%;
}

.img-banner {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.classify {
  width: 100%;
  height: 132.5px;
  position: fixed;
  bottom: 170px;
  left: 0;
  z-index: 11;
}
.classify-three {
  width: 33.33%;
  text-align: center;
}

.classify-img {
  width: 75px;
  height: 75px;
  margin-left: 25px;
  position: relative;
  z-index: 11;
}
.classify-text {
  font-size: 18px;
  width: 100%;
  text-align: center;
  color: #fff;
  margin-top: 2px;
}

.flexs {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
</style>

